<!-- 我是商家 -->
<template lang="html">
  <div class="merchantsBox">
    <el-row class="head">
      <el-col :span="2" >
        <div :class="productTab==1?'productTab active':'productTab'" @click="tabList(1)">
          商家管理
        </div>
      </el-col>
      <el-col :span="2" >
        <div :class="productTab==2?'productTab active':'productTab'" @click="tabList(2)">
          酒店管理
        </div>
      </el-col>
      <el-col :span="2" >
        <div :class="productTab==3?'productTab active':'productTab'" @click="tabList(3)">
          剧场管理
        </div>
      </el-col>
    </el-row>
    <router-view> </router-view>
    <!-- 弹窗 -->
    <el-dialog :title="$store.state.TanMerchants.title" :visible.sync="$store.state.TanMerchants.TanVisible" class="tanBox">
      <v-addTan1 v-if="$store.state.TanMerchants.TanType==1"></v-addTan1>
      <v-addTan2 v-if="$store.state.TanMerchants.TanType==2"></v-addTan2>
      <v-SJupdate v-if="$store.state.TanMerchants.TanType==4"></v-SJupdate>
      <v-detail v-if="$store.state.TanMerchants.TanType==3"></v-detail>

      <v-addHotel v-if="$store.state.TanMerchants.TanType==5"></v-addHotel>
      <v-hotel v-if="$store.state.TanMerchants.TanType==6"></v-hotel>
      <v-drama v-if="$store.state.TanMerchants.TanType==7"></v-drama>
      <v-updateDrama v-if="$store.state.TanMerchants.TanType==8"></v-updateDrama>
    </el-dialog>
  </div>
</template>

<script>
import addTanContent1 from "./TanContent.vue"
import addTanContent2 from "./TanContent2.vue"
import SJupdate from "./SJupdate.vue"
import TanDetailed from "./TanDetailed.vue"
import TanHotel from "./TanHotel.vue"
import TanAddHotel from "./TanAddHotel.vue"
import TanDrama from "./TanDrama.vue"
import TanUpdateDrama from "./TanUpdateDrama.vue"

export default {
  data(){
    return {
      productTab:1,
      currentPage3:2,
      orderNumb:'',
      dialogFormVisible:false,
      labelPosition:'left',
      formLabelAlign:{
        name:'',
        region:'',
        type:''
      },
      value:'',
      value2:'',
      value3:'',
      form: {
          name: "",
          address:"",
          city:"",
          content:""
      }
    }
  },
  methods:{
    tabList:function (n){
      var that = this;
      this.productTab=n;
      console.log(n);
      switch (n) {
        case 1:
          that.$router.push({path:'/merchants/merchantsSJ'});
          break;
        case 2:
          that.$router.push({path:'/merchants/merchantsHotel'});
          break;
        case 3:
          that.$router.push({path:'/merchants/merchantsDrama'});
          break;
        default:
          break;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  },
  components:{
    'v-addTan1':addTanContent1,
    'v-addTan2':addTanContent2,
    'v-detail':TanDetailed,
    'v-hotel':TanHotel,
    'v-drama':TanDrama,
    'v-SJupdate':SJupdate,
    'v-addHotel':TanAddHotel,
    'v-updateDrama':TanUpdateDrama
  },
  watch:{
    $route:function (){
      var that = this;
      switch (that.$route.path) {
        case '/merchants/merchantsSJ':
          that.productTab=1;
          break;
        case '/merchants/merchantsHotel':
          that.productTab=2;
          break;
        case '/merchants/merchantsDrama':
          that.productTab=3;
          break;
        default:
      }
    }

  },
  created(){
    var that = this;
    switch (that.$route.path) {
      case '/merchants/merchantsSJ':
        that.productTab=1;
        break;
      case '/merchants/merchantsHotel':
        that.productTab=2;
        break;
      case '/merchants/merchantsDrama':
        that.productTab=3;
        break;
      default:
    }
    
    this.$store.state.index='7';
  }
}
</script>

<style lang="Sass">
    .merchantsBox{
      .headLable{width: 80px;}
    }
</style>
<style lang="Sass" scoped>
.merchantsBox{width: 100%; height: 100%; box-sizing: border-box; background: #F7F8FC;

  .head{line-height: 50px; background: #fff;
    .productTab{height: 40px; line-height: 40px; margin: 0 20px; box-sizing: border-box; cursor: pointer;}
    .active{border-bottom: 4px solid #13CE66;}
  }

}

.text-left{text-align: left;}
.text-right{text-align: right;}
.heightAll{height: 100%;}
.add{margin-left: 10px;}
</style>
